經過原子→分子的組合，今天進入組織，透過組織我們可以得到更完整的 UI 元件，在後續的模版中，套用組織，就可以快速完成一個頁面。

03 組織：

在組織頁面裡，我們開啟 6 個 section ，命名為：03-1 Header、03-2 Form、03-3 Table、03-4 Tabs、03-5  Modal、03-6  Menu tree。

03-1 Header：

Header 也就是頁首，它的組合分子有：Logo、公司名稱、系統名稱、使用者名稱、登出按鈕，頁首可以展現品牌調性，所以在用色上我們使用品牌色，也就是主色系。

• 尺寸：高度：固定 80 px，寬度：父層的 100%。
• Logo：高度：Header 高度的 80%，寬度：auto（隨高度等比例縮放）。
• 文字：以 Typography 的定義為主，使用 Heading 1 ，顏色：白色。
• 底色：以品牌色主色系為主，使用 primary 。
  

03-2 Form：

公司產品的表單內容千變萬化，我也曾經整理出一篇「表單困難百百款」，例如：為了符合格線系統的佈局，每個欄位佔欄數要統一，可是表單元件的資料只有 4 位數，看起來會很空，經過了無數次的協調與溝通，定義了一個「基本款」。（沒打起來，真的沒打起來，我們很 peace ~.~）

• 尺寸：表單的寬度為父層的 100%，高度隨內容自動縮放（auto）。
• 組合的原子、分子：Input、Select、Radio Button、Checkbox、Icon、Title、Button Line。
• grid System 佈局：每一列以 4 欄為主（佔欄數 3），再依據每一個元件的功能及所需要的長度調整。
• 一列內的表單元件不滿 4 欄：一樣以 4 欄為主，未滿 4 欄的部份留白。
• Radio Button、Checkbox：雖然這兩個 UI 元件本身不像 Input、Textarea 一樣有外框，為了整體版面的一致性視覺，我們定義它加外框，外框樣式與 Input 相同。
  

03-3 Table：

公司的表格很「有趣」，因為古早古早之前，我們公司是用 iframe 來裝表格，而 iframe 的高度是寫死的 1000 px （對，你沒看錯），當一頁的呈現筆數很多（例：每頁100筆）就會形成兩條捲軸（瀏覽器一條，iframe 一條 QQ）在本次改版砍掉重練時，我們捨棄了 iframe，改以 Modal 裝表格，Modal 的高度最高不超過視窗高度，寬度不會超過父層的 100%，溢出的部份顯示捲軸，這樣就只有 Modal 有捲軸，不會出現兩條捲軸的冏境了（表格的尺寸就讓它放飛自我吧 XDD）。

• 尺寸：表格的寬度為父層的 100%，高度隨呈現筆數的多寡而自動縮放（auto）。
• 組合的原子、分子：Table（Thead：tr th、Tbody：tr td、Checkbox、Icon Button）、Title、Pagination。
  

03-4 Tabs：

透過側邊欄（aside）裡面的導航樹（Menu Tree）可以做到功能分類，點擊之後就可以進入該功能頁面，但是 Menu Tree 的層級也不可以太多，（主管說最多曾做過 12 層！！！）標籤頁就可以解決這方面的問題，它可以把同層級的資訊再分類，進行收納，透過點擊頁籤即可呈現不同資訊，也可以節省頁面空間。

• 尺寸：標籤頁的高度如果設為 auto，那就會因為每一頁的內容不同而忽高忽低，視覺上看起來會很凌亂，所以寬度與高度都設定為父層的 100%。
• 組合的分子：Button Line（文字按鈕）、標籤頁內容區。
  

03-5 Modal：

Dialog（對話框）、Modal（模態框）、Pop-up（彈出氣泡）、Popover（彈出框），單單一個面版就有這麼多的名詞解釋，它們的功能也有所差異，求教過 google、ChatGPT 之後，我們決定統一使用 Modal 這個名詞。

• 尺寸：Modal 的內容有各種不同的種類，所以尺寸較彈性，以內距撐開，但有規範最小、最大尺寸。
• 組合的分子：Title、Icon、Button Line。
  

03-6 Menu Tree：

Menu Tree 是一個系統的重要組件，它負責整個系統的導航作用，使用者依據導航樹進行各功能、各頁面的跳轉，所以在設計上：

1. 層級結構要很強。
2. 可分層收合展開。
3. 畫面簡潔。

• 尺寸：寬度：以 grid system 為基礎，佔欄數 3。
  　　　高度：瀏覽器可視高度（dvh）減掉 Header 高度，超出則顯示捲軸。
• 互動：
  • hover：item 底色為輔色減三個色階。
  • focus：item 底色為主色色階，文字白色，字體加租。
  • toggle：點擊父層 item，展開子層，再點擊父層，收合子層。
    

耶～組織完成了，明天見（累～）。